<!DOCTYPE html>
<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
		
		<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		 
		<title>对话框</title>
		<style>
	
		</style>
	</head>
	<body>
		静态对话框：
		<!-- <div class="modal show" tabindex="-1" role="dialog">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
				<div class="modal-header">
					<button class="close"  type="button" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times;</span></button>
						<div class="modal-title">
							弹出框
						</div>
									</div>
						
						<div class="modal-body">
							文本内容
						</div>
		
					</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-info" data-dismiss="modal">确定</button>
					</div>
			</div>
			
		</div> -->
		
		动态对话框<br />
		<button type="button " class="btn btn-success" data-toggle="modal" data-target="#mymodel">打开对话框</button><!-- 这个id就是指向下面的对话框 -->
	<div class="modal fade" id="mymodel" tabindex="-1" role="dialog"><!-- 最大的对话框 -->
		<div class="modal-dialog" role="document"><!-- 对话框文档 -->
			<div class="modal-content"><!-- 对话框内容 -->
			<div class="modal-header"><!-- 对话框开头 -->
				<button class="close"  type="button" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times;</span></button>
					<div class="modal-title"><!-- 对话框题目 -->
						弹出框
					</div>
								</div>
					
					<p class="modal-body"><!-- 对话框身体 -->
						文本内容
					</p>
	
				
			<div class="modal-footer"><!-- 对话框尾部 -->
				<button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-info" data-dismiss="modal">确定</button>
				</div>
				</div>
		</div>
		
	</div>
	导航栏<br>
	<ul class="nav nav-tabs">
		<!-- 通过这个a链接的href来连接tab-content的内容 -->
		<li  role="presentation"><a href="#home"   data-toggle="tab" >home</a></li>
		<li  role="presentation"><a  href=" #first" data-toggle="tab" aria-controls="first" role="tab">first</a></li>
		<li  role="presentation"><a  href="#second"   data-toggle="tab" aria-controls="second" role="tab">second</a></li>
		<li  role="presentation"><a href="#third" data-toggle="tab" aria-controls="third" role="tab">third</a></li>
	</ul>
	<div class="tab-content">
		<div role="tab-pannel" class="tab-pane" id="home">家</div>
		<div role="tab-pannel" class="tab-pane" id="first">第一个选项卡</div>
		<div role="tab-pannel" class="tab-pane" id="second">第二个选项卡</div>
		<div role="tab-pannel" class="tab-pane" id="third">第三个选项卡</div>

	</div>
	工具提示<br />
	<button style="margin-left: 200px;" class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="这是根据提示右边">工具</button>
	<button style="margin-left: 200px;" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="这是根据提示右边">工具1</button>
		<button style="margin-left: 200px;" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="这是根据提示上边">工具2</button>
		<button style="margin-left: 200px;" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="这是根据提示下边">工具3</button>
	<script>
		$(function(){
			$('[data-toggle="tooltip"]').tooltip()
			});//显示所有提示
	</script>
	<br />
	  弹出框 不能使用button标签，并且还必须包含 role="button" 和tabindex属性。
<br />
<br />
<br />
<br />

	  <a tabindex="0" role="button" class="btn btn-default" data-toggle="popover" data-trigger="focus" title="弹出框" data-content="这是个弹出框">点击弹出框</a>
	  <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-placement="right" data-trigger="focus" title="Dismissible popover" data-content="And here‘s some amazing content. It‘s very engaging. Right?">可消失的弹出框</a>
<!-- 需要js代码才可以显示 -->
		<script>
	$(function(){
			$('[data-toggle="popover"]').tooltip()
			});//显示所有提示
	</script>

	
	
	收缩面板也即Collapse，点击按钮可展开或收缩面板
		<br>
	    <a class="btn btn-lg bg-success" href="#collapse1" data-toggle="collapse">链接方式的面板</a>
		<button class="btn  bg-primary" data-target="#collapse2" data-toggle="collapse">
		收缩面板
		</button>
		<div class="collapse" id="collapse1">
			<p>	收缩面板也即Collapse，点击按钮可展开或收缩面板</p>
		</div>
		<div class="collapse2" id="collapse2">
			<p>	收缩面板也即Collapse，点击按钮可展开或收缩面板33333</p>
		</div>
	</body>
	可关闭的警示框<br>
	<div class="alert alert-warning alert-dismissable fade in"  role="alert" >
		<button type="button" class="close" data-dismiss="alert" aria-label="close">
			<span>&times;</span>
				</button>
			<strong>警告</strong>
			dfkmfisjfudsfjus
	
		</div>
	轮播图<br />
	<!-- 必须得是这个id -->
	<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
			
		<!-- 指示符 --> <ul class="carousel-indicators"> 
			<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
			<li data-target="#carousel-example-generic" data-slide-to="1"></li> 
			<li data-target="#carousel-example-generic" data-slide-to="2"></li> 
		</ul> 
		<!-- 插入图片 --> 
		<div class="carousel-inner" role="listbox"> 
			<div class="item active">
				<img class="img-responsive" src="images/mac.jpeg"/>
				<div class="carousel-caption"> 
					<h1>轮播1的标题</h1> 
					<p>这里是轮播图1的说明</p> 
				</div> 
			</div> 
			<div class="item">
				<img class="img-responsive" src="images/mac.jpeg"/>
			<div class="carousel-caption"> 
				<h1>轮播2的标题</h1> 
				<p>这里是轮播图2的说明</p>
			</div>
			</div> 
			<div class="item">
				<img class="img-responsive" src="images/mac.jpeg"/>
			<div class="carousel-caption">
				<h1>轮播3的标题</h1>
				<p>这里是轮播图3的说明</p>
			</div> 
			</div> 
		</div> <!-- 翻页 --> 
		<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
			<span class="glyphicon glyphicon-chevron-left"></span> 
			<span class="sr-only">Previous</span> </a> 
			<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
				<span class="glyphicon glyphicon-chevron-right"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
	<br />
<template id="order_list" " version="0.1">
    <LinearLayout>
        <text name="lable">您想咨询的订单是哪个呢？</text>
    </LinearLayout>
    <LinearLayout>
        <link type="block" style="button" target="block_id_1" params="orderId=4512" >
            <image name="p_img" url="xxx.jpg"/>
            <text name="p_name">ZARA女装加大码飞行夹克 08073243800</text>
            <text name="p_price">2499</text>
            <text name="p_count">1</text>
            <text name="p_status">待付款</text>
        </link>
    </LinearLayout>
    <LinearLayout>
        <link type="block" style="button" target="block_id_1" params="orderId=4513" >
            <image name="p_img" url="xxx.jpg"/>
            <text name="p_name">当顿庄园 澳洲进口牛肉腌制菲力牛排1200克8片装套餐</text>
            <text name="p_price">99</text>
            <text name="p_count">1</text>
            <text name="p_status">待发货</text>
        </link>
    </LinearLayout>
    <LinearLayout>
        <link type="block" style="button" target="block_id_1" params="orderId=4514" >
            <image name="p_img" url="xxx.jpg"/>
            <text name="p_name">裸感超薄光版自带防尘iphone7 plus苹果6/6s手机壳</text>
            <text name="p_price">16.8</text>
            <text name="p_count">2</text>
            <text name="p_status">已发货</text>
        </link>
    </LinearLayout>
    <LinearLayout>
        <link type="block" style="button" target="block_id_1" params="orderId=4514" >
            <image name="p_img" url="xxx.jpg"/>
            <text name="p_name">中筒皮毛一体雪地靴</text>
            <text name="p_price">481.6</text>
            <text name="p_count">1</text>
            <text name="p_status">已收货</text>
        </link>
    </LinearLayout>
    <LinearLayout>
        <link type="url" style="button" url="https://xxxx.xxx.xx" >
            <text name="p_name" color="5B9B5D">更多订单</text>
        </link>
    </LinearLayout>
</template>

</body>
</html>
